<template>
  <div class=''>
    <div style="display: flex;">
      <div v-if="type === 'linear'" class="box_xxx" :style="style" @click="showPicker"></div>
      <div v-if="type === 'gradient'" class="box_xxx box1" :style="style1" @click="showPicker1"></div>
    </div>
    <div v-if="type === 'linear'" class="color_poick">
      <ColorPicker
        v-model="isShowColorPicker"
        type="linear"
        @changeColor="changeColor"
        @onClose="onClosePicker"
        :pColor="pColor"
        :showClose="true"
        :closeOnClickBody="true"
      />
    </div>
    <div v-if="type === 'gradient'" class="color_poick">
      <ColorPicker
        v-model="isShowColorPicker1"
        type="gradient"
        @changeColor="changeColor1"
        @onClose="onClosePicker1"
        :pDeg="pDeg"
        :pColors="pColors"
        :showClose="true"
        :closeOnClickBody="true"
      />
    </div>
  </div>

  <!-- :pColor="pColor"
        :pColors="pColors" -->
</template>

<script>
import ColorPicker from 'vue2-color-picker-gradient'
export default {
  name: 'DqColorPicker',
  components: {
    ColorPicker
  },
  props: {
    value: {
      type: String
    },
    type: {
      type: String
    }
  },
  data () {
    return {
      isShowColorPicker: false,
      isShowColorPicker1: false,
      style: '',
      style1: '',
      titleConfig: {
        show: true,//控制顶部文字 关闭按钮 显隐
        text:'颜色选择器'//顶部文字
      },
      pDeg: 90,
      pColor: {
        hex: '#ffffff',
        hex8: '#ffffff',
        hsl: { h: 150, s: 0.5, l: 0.2, a: 1 },
        hsv: { h: 150, s: 0.66, v: 0.3, a: 1 },
        rgba: { r: 255, g: 255, b: 255, a: 1 },
        a: 1,
        color: 'rgba(255,255,255,1)',
      },
      pColors: [
        {
          color: 'rgba(255, 255, 255, 1)',
          hex: '#ffffff',
          rgba: { r: 255, g: 255, b: 255, a: 1 },
          pst: 100,
        },
        {
          color: 'rgba(0, 0, 0, 1)',
          hex: '#000000',
          rgba: { r: 0, g: 0, b: 0, a: 1 },
          pst: 0,
        },
      ],
    }
  },
  watch: {
    'value': {
      handler: function(newVal, oldVal) {
        if(newVal){
          if (this.value.indexOf('linear-gradient') !== -1) {
            this.style1 = `background: ${this.value}`
          }else{
            this.style = `background: ${this.value}`
          }
        }
      }
    }
  },
  created() {
    if (this.value.indexOf('linear-gradient') !== -1) {
      const arr = this.value.match(/(rgba?.*?\))/gmi)
      const brr = this.value.match(/(?<=\)).*?(?=%)/gmi)
      const deg = this.value.match(/\((\S*)deg/)
      arr.forEach((item, index) => {
        if (this.pColors[index]?.color) {
          this.pDeg = deg[1]
          this.pColors[index].color = item
          this.pColors[index].pst = parseFloat(brr[index])
        } else {
          this.pColors[index] = { color: item, hex: '#000000', rgba: { r: 0, g: 0, b: 0, a: 1 }, pst: parseFloat(brr[index]) }
        }
      })
    } else {
      if (this.type === 'linear') {
        this.pColor.color = this.value
        this.style = `background: ${this.value}`
      } else {
        return
      }
    }
  },
  methods: {
    changeColor(val) {
      this.style = `background: ${val.color.color}`
      this.$emit('input', val.color.color)
      // 柱形图背景色使用事件
      if (val.color.color) {
        this.$emit('changeColor')
      }
    },
    showPicker() {
      this.isShowColorPicker = true
    },
    onClosePicker() {},
    changeColor1(val) {
      this.style1 = `background: ${val.style}`
      this.$emit('input', (val.style).slice(0, -1))
    },
    showPicker1() {
      this.isShowColorPicker1 = true
    },
    onClosePicker1() {}
  },
}
</script>
<style scoped lang='scss'>
.color_poick {
  display: flex;
  justify-content: space-between;
  width: 590px;
  position: relative;
}
.box_xxx {
  width: 30px;
  height: 30px;
  border: 1px solid #ddd;
}
.color_picker_wrapper{
  position: absolute;
  z-index: 9999;
}
::v-deep .color_picker_wrapper .color_picker_box .gcolor_deg input{
  min-width: 30px !important;
  max-width: 30px !important;
}
</style>